<template>
  <div class="mine-page">
    <div class="info-box">
      <mu-flex justify-content="center">
        <mu-button icon color="#fff" :ripple="false" large>
          <mu-icon size="60" value=":iconfont icon-touxiang"></mu-icon>
        </mu-button>
        <mu-avatar size="54" v-if="false">
          <img src="http://img2.touxiang.cn/file/20170122/2196d02432b46fff21d33bf23c32083e.jpg">
        </mu-avatar>
      </mu-flex>
      <!-- <div class="info-item">王五</div> -->
      <div class="info-item">(+{{userInfo.country.dialingPrefix}}) {{userInfo.msisdn}}</div>
      <div class="info-item">剩余话费：{{userInfo.remainingMoney | toFixed}}欧元</div>
    </div>
    <mu-list :dense="true">
      <mu-divider></mu-divider>
        <div @click="goLink('1')">
          <mu-list-item avatar button>
            <mu-list-item-action>
              <mu-button icon color="secondary" :ripple="false">
                <mu-icon size="35" value=":iconfont icon-chongzhi0101"></mu-icon>
              </mu-button>
            </mu-list-item-action>
            <mu-list-item-content>
              <mu-list-item-title>话费充值</mu-list-item-title>
            </mu-list-item-content>
            <mu-list-item-action>
              <mu-button icon color="track">
                <mu-icon value=":iconfont icon-xiazai6-copy"></mu-icon>
              </mu-button>
            </mu-list-item-action>
          </mu-list-item>
          <mu-divider></mu-divider>
       </div>
       <div @click="goLink('2')">
        <mu-list-item avatar button>
          <mu-list-item-action>
            <mu-button icon color="secondary" :ripple="false">
              <mu-icon size="35" value=":iconfont icon-touxiang2"></mu-icon>
            </mu-button>
          </mu-list-item-action>
          <mu-list-item-content>
            <mu-list-item-title>关于我们</mu-list-item-title>
          </mu-list-item-content>
          <mu-list-item-action>
            <mu-button icon color="track">
              <mu-icon value=":iconfont icon-xiazai6-copy"></mu-icon>
            </mu-button>
          </mu-list-item-action>
        </mu-list-item>
        <mu-divider></mu-divider>
      </div>
    </mu-list>
  </div>
</template>
<script>
export default {
  data () {
    return {
      userInfo: JSON.parse(sessionStorage.getItem('userInfo')) || {}
    };
  },
  mounted() {
    this.$getClient();
  },
  methods: {
    goLink(type) {
      this.$router.push({ 'path': '/' + this.$route.params.APPID + '/' + (type === '1' ? 'topup' : 'aboutus') });
    }
  }
};
</script>
<style lang="less" scoped>
  .mine-page{
    .info-box{
      background: var(--primary-color);
      padding: 50px 0 30px;
      margin-bottom: 10px;
      color: #fff;
      .info-item{
        text-align: center;
        padding-top: 2px;
      }
    }
  }
</style>
<style lang="less">
  .mine-page{

  }
</style>
